<template>
<view class="container">
  <uni-nav-bar title="卡券" left-icon="back"  fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
  <view class="coupon-form">
    <view class="input-box">
      <input class="coupon-sn" @input="bindinput" placeholder="请输入兑换码"></input>
      <!-- <image class="clear-icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/clear-fb-dd9d604f86.png"></image> -->
    </view>
    <text class="add-btn" @tap="exchange">兑换</text>
  </view>
  <view v-if="!hasRefund" class="status-box">
        <view v-for="(item, index) in statusType" :key="index" @tap="statusTap" :class="'status-label ' + (item.status == status ? 'active' : '')" :data-status="item.status">
        {{item.label}}
        <view v-if="badges[index]" class="weui-badge" style="position: absolute;top: 5rpx;right: 5rpx;">{{badges[index]}}</view>
        </view>
    </view>
  <!-- <view class="help">使用说明</view> -->
  <view class="coupon-list">
    <view v-for="(item, index) in dataList" :key="index" class="item">
      <!-- <view class="tag">{{item.coupon.typeValue}}</view> -->
      <image v-if="status == 0" class="bg" src="/static/static/images/coupon.png" mode="aspectFill"></image>
      <image v-if="status > 0" class="bg" src="/static/images/couponnopng" mode="aspectFill"></image>
      <image v-if="status == 1" class="icon" src="/static/static/images/used.png" mode="aspectFill"></image>
      <image v-if="status == 2" class="icon" src="/static/static/images/dated.png" mode="aspectFill"></image>
      <view class="content">
        <view class="left">
          <view class="name">{{item.coupon.name}}</view>
          <view class="time">全场满{{item.coupon.minPoint}}减{{item.coupon.amount}}</view>
        </view>
        <view class="right">
          ￥
          <text class="a">{{item.coupon.amount}}</text>
        </view>
        <!-- <view class="right">
          <button class="go">去使用</button>
        </view> -->
      </view>
      <view class="condition">
        <text class="txt">有效期至{{item.coupon.endTime}}</text>
        <text class="r">{{item.coupon.typeValue}}</text>
        <!-- <text class="txt">{{item.coupon.note}}</text> -->
        <!-- <image src="https://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/couponArrow-71315b4145.png" class="icon"></image> -->
      </view>
    </view>

     <!-- <view class="item">
      <view class="tag">新人专享</view>
      <view class="content">
        <view class="left">
          <view class="name">限时免单券</view>
          <view class="time">2017.06.08-2017.06.11</view>
        </view>
        <view class="right">
          <button class="go">去使用</button>
        </view>
      </view>
      <view class="condition">
        <text class="txt">简约陶瓷马克杯专享；小米用户福利；限时购、三石福利价、礼品卡及详情页标注不可用券特殊商品除外</text>
        <image src="https://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/couponArrow-71315b4145.png" class="icon"></image>
      </view>
    </view> -->
  </view>


</view>
</template>

<script>
var util = require("../../../utils/util.js");
var api = require("../../../config/api.js");
var app = getApp();
import login from "../../component/login/login";
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

export default {
  data() {
    return {
      dataList: [],
      datanumber: '',
      showLoginDialog: false,
      statusType: [{
        status: 0,
        label: '未使用'
      }, {
        status: 1,
        label: '已使用'
      }, {
        status: 2,
        label: '已过期'
      }],
      status: 0,
      hasRefund: false,
      couponCode: '',
      couponNum: ''
    };
  },

  components: {
    login,
	uniNavBar
  },
  props: {},
  onLoad: function (options) {},
  onShow: function () {
    this.loadData();
  },
  onPullDownRefresh: function () {
    uni.showNavigationBarLoading(); //在标题栏中显示加载

    this.loadData(); //模拟加载

    setTimeout(function () {
      // complete
      uni.hideNavigationBarLoading(); //完成停止加载

      uni.stopPullDownRefresh(); //停止下拉刷新
    }, 1500);
  },
  methods: {
	  goback(){
		  uni.navigateBack()
	  },
    statusTap: function (e) {
      console.log("=e=" + JSON.stringify(e));
      const status = e.currentTarget.dataset.status;
      this.setData({
        status: status
      });
      this.loadData();
    },

    loadData() {
      let that = this;
      uni.showLoading();
      let status = that.status;
      util.request(api.CouponList, {
        useStatus: status
      }).then(function (res) {
        uni.hideLoading();

        if (res.errno == 0) {
          console.log(res.data);
          that.setData({
            dataList: res.data.records
          }); // var couponNum = dataList.length;
          // that.setData({
          //   couponNum: couponNum,
          // });
        } else if (res.status == 500) {
          that.showLogin();
        }
      });
    },

    bindinput(event) {
      this.setData({
        couponCode: event.detail.value
      });
    },

    exchange: function (e) {
      var that = this;
      uni.showLoading();
      util.post(api.ExchangeCoupon, {
        couponCode: that.couponCode
      }).then(function (res) {
        uni.hideLoading();
        console.log("==exchange==" + JSON.stringify(res));

        if (res.errno == 0) {
          that.loadData();
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message,
            duration: 3000
          });
        }
      });
    },
    showLogin: function () {
      console.log("==show login==");
      this.setData({
        showLoginDialog: true
      });
    },
    onLigonSuccess: function () {
      console.log("==onLigonSuccess==");
      this.loadData();
    }
  }
};
</script>
<style>
page{
    background: #fff;
    min-height: 100%;
}

.container{
    background: #f1f1f1;
    min-height: 100%;
}

.coupon-form{
  height: auto;
  width: 100%;
  background: #fff;
  display: flex;
  padding: 20rpx 30rpx;
}

.input-box{
  flex: 1;
  height: auto;
  color: #b2b2b2;
  font-size: 24rpx;
  background: #f1f1f1;
  position: relative;
  border-radius: 8rpx;
}
.input-box .coupon-sn{
  position: absolute;
  top: 7rpx;
  left: 20rpx;
  height: 50rpx;
  width: 100%;
  color: #000;
  line-height: 50rpx;
  font-size: 24rpx;
}
/* .clear-icon{
  position: absolute;
  top: 21rpx;
  right: 30rpx;
  width: 28rpx;
  height: 28rpx;
} */
.add-btn{
  color: #b28850;
  font-size: 30rpx;
  margin-left: 20rpx;
  line-height: 60rpx;
}

.add-btn.disabled{
  background: #ccc;
}

/* .help{
  height: 72rpx;
  line-height: 72rpx;
  text-align: right;
  padding-right: 30rpx;
  background: url("https://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/couponHelp-4768607555.png") 590rpx center no-repeat;
  background-size: 28rpx;
  color: #999;
  font-size: 24rpx;
} */


.status-box{
  width:100%;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-top: 1rpx solid #e5e4e5;
}
.status-box .status-label{
  width: 150rpx;
  height: 100%;
  text-align: center;
  font-size:26rpx;
  color:#353535;
  box-sizing: border-box;
  position: relative;
}
.status-box .status-label.active{
  font-size: 30rpx;
  color:#b28850;
  border-bottom: 6rpx solid #b28850;
}

.coupon-list{
  width: auto;
  height: -webkit-fill-available;
  overflow: hidden;
  margin: 20rpx 30rpx;
}

.item{
  position: relative;
  height: 240rpx;
  width: 690rpx;
  margin-bottom: 30rpx;
}

/* .tag{
  height: 32rpx;
  background: #A48143;
  padding-left: 16rpx;
  padding-right: 16rpx;
  position: absolute;
  left: 20rpx;
  color: #fff;
  top: 20rpx;
  font-size: 20rpx;
  text-align: center;
  line-height: 32rpx;
} */

.item .bg {
  width: 100%;
  height: 100%;
  position: absolute;
}
.item .icon {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  left: 340rpx;
}

.content{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  padding: 30rpx;
}

.content .left{
  flex: 1;
}

.name{
  font-size: 36rpx;
  line-height: 38rpx;
  color: #fff;
  margin-bottom: 16rpx;
}

.time{
  font-size: 28rpx;
  color: #fff;
  line-height: 30rpx;
}

.content .right{
  color: #fff;
  font-size: 30rpx;
}
.content .right .a{
  color: #fff;
  font-size: 80rpx;
}

/* .go{
  height: 48rpx;
  border:none;
  width: 162rpx;
  background: rgba(255,255,255, 0.8);
  border-radius: 4rpx;
  line-height: 48rpx;
  color: #b69150;
  font-size: 24rpx;
} */

.condition {
  width: 100%;
  bottom: 0;
  left:0;
  height: 78rpx;
  padding: 22rpx 40rpx;
  display: flex;
  flex-direction: row;
  position: absolute;
}

.condition .txt{
  display: block;
  height: 30rpx;
  flex: 1;
  overflow: hidden;
  font-size: 24rpx;
  line-height: 30rpx;
  color: #fff;
}


/* .condition .icon{
  margin-left: 30rpx;
  width: 24rpx;
  height: 24rpx;
} */
.condition .r{
  height: 24rpx;
  color: white;
}
</style>